import React, { useState } from "react";
import { Upload, Button } from 'antd';
import LrFilePreview from "../../src/index.js"; // 本地调试
// import LrFilePreview from "../../dist/lr-file-preview.esm.js"; // 打包调试

const App = ({ }) => {

  React.useEffect(() => {
    // 组件挂载后执行的代码
    // 可以在这里进行一些初始化操作
  }, []);

  const handlePreview = (file) => {
    const uploadPreview = new LrFilePreview(file, {
      container: 'preview',
      title: '文件预览222222',
      loadingMsg: 'loading...',
      errorMsg: '1231231231313预览文件错误，请重新选择。',
    });
  }

  const uploadProps = {
    name: 'previewFile',
    accept: '.docx,.xlsx,.pdf,.jpg,.jpeg,.png,.csv,.txt',
    beforeUpload: () => false,
    maxCount: 1,
    onChange(info) {
      const { file } = info;
      console.log("file => ", file);
      handlePreview(file);
    },
  };

  return (
    <div className="app-container">
      <h1>文件预览功能演示</h1>
      <p>请选择 .docx,.xlsx,.pdf,.jpg,.jpeg,.png,.csv 格式的文件！</p>

      <Upload {...uploadProps}>
        <Button>选择预览文件</Button>
      </Upload>
    </div>
  );
};

// 设置默认属性
App.defaultProps = {
  text: "Click Me",
  disabled: false,
  className: "",
  style: {}
};

export default App;